import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
import { WithStyles } from "@material-ui/core/styles/withStyles";
import * as React from "react";
import { Avatar, Card, List } from "antd";
import { useEffect, useState } from "react";
import service from "../../axios/Service";
import { Classes } from "jss";
import { Link } from "react-router-dom";

const styles = (theme: Theme) =>
  createStyles<"root" | "content" | "mainContant" | "newText" | "newDate">({
    root: {},
    content: {
      display: "flex",
      alignItems: "flex-end",
      fontSize: 12,
      color: "rgba(0, 0, 0, 0.45)"
    },
    mainContant: {
      display: "flex"
    },
    newText: {
      flex: 1,
      overflow: "hidden",
      textOverflow: "ellipsis",
      whiteSpace: "nowrap"
    },
    newDate: {
      width: "80px"
    }
  });

interface Iprops extends WithStyles<typeof styles> {
  firstType?: string;
  secondType?: string;
  otherStyle?: boolean;
}
export interface newsData {
  id?: string;
  createTime?: string;
  updateTime?: string;
  status?: any;
  firstType?: any;
  secondType?: string;
  imageUrl?: string;
  content?: string;
  title?: string;
  remark?: string;
}
/**
 * 描述：
 *  消息内容
 * @author sunshixiong
 * @date 2019/3/18-17:25
 */
const InformationContent = (props: Iprops) => {
  const [data, setData] = useState([]);
  useEffect(() => {
    service
      .get("/news/query", {
        params: {
          firstType: props.firstType,
          secondType: props.secondType,
          status: 1
        }
      })
      .then(value => {
        if (value.data._embedded && value.data._embedded.news) {
          setData(value.data._embedded.news);
        }
      });
  }, []);
  const substrDate = (date: any) => {
    return date.substr(0, 10);
  };
  return (
    <List
      dataSource={data}
      pagination={{ pageSize: 10 }}
      renderItem={(item: newsData) => {
        if (props.otherStyle) {
          return (
            <List.Item
              actions={[
                <Link
                  key={item.id}
                  to={{ pathname: "/views-check", state: item }}
                >
                  <a>详情</a>
                </Link>
              ]}
              key={item.id}
            >
              <div className={props.classes.newText}>{item.title}</div>
              <div className={props.classes.newDate}>
                {substrDate(item.updateTime)}
              </div>
            </List.Item>
          );
        } else {
          return (
            <List.Item
              actions={[
                <Link
                  key={item.id}
                  to={{ pathname: "/views-check", state: item }}
                >
                  <a>详情</a>
                </Link>
              ]}
              key={item.id}
            >
              <List.Item.Meta
                avatar={<Avatar size={80} src={item.imageUrl} />}
                title={<h5>{item.title}</h5>}
                description={item.remark}
              />
              <div className={props.classes.content}>{item.createTime}</div>
            </List.Item>
          );
        }
      }}
    />
  );
};

export default withStyles(styles)(InformationContent);
